<template>
  <div class="app-container">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-row style="position: absolute;right: 70px;z-index: 99;margin-top: -8px;">
       <el-input placeholder="输入订单号或买家手机号查询"  class="input-with-select">
         <el-button slot="append" icon="el-icon-search"></el-button>
       </el-input>
      </el-row>
      <el-tabs v-model="message" @tab-click="onUserList">
        <el-tab-pane :label="`全部(${unread.length})`" name="first"></el-tab-pane>
        <el-tab-pane :label="`代付款(${read.length})`" name="second"></el-tab-pane>
        <el-tab-pane :label="`待发货(${recycle.length})`" name="third"></el-tab-pane>
        <el-tab-pane :label="`发货中(${unread.length})`" name="fourth"></el-tab-pane>
        <el-tab-pane :label="`已完成(${recycle.length})`" name="fifth"></el-tab-pane>
        <el-tab-pane :label="`售后处理(${read.length})`" name="sixth"></el-tab-pane>

        <el-table :data="users" highlight-current-row style="width: 100%;">
          <el-table-column prop="nnn" label="订单号" width="140">
          </el-table-column>
          <el-table-column prop="time" label="下单时间" width="170">
          </el-table-column>
          <el-table-column prop="name" label="商品" width="240">
            <template slot-scope="scope">
              <img  :src="scope.row.img" alt="" style="width: 50px;height: 50px;margin-left: 10px;">
              <img  :src="scope.row.img" alt="" style="width: 50px;height: 50px;margin-left: 10px;">
              <img  :src="scope.row.img" alt="" style="width: 50px;height: 50px;margin-left: 10px;">
            </template>
          </el-table-column>
          <el-table-column prop="name" label="数量" width="150">
          </el-table-column>
          <el-table-column prop="phone" label="结算金额" width="150">
          </el-table-column>
          <el-table-column prop="phone" label="支付方式" width="150">
          </el-table-column>
          <el-table-column prop="name" label="收货人信息" width="140">
          </el-table-column>
          <el-table-column prop="name" label="订单状态" min-width="140">
          </el-table-column>
          <el-table-column label="操作" width="130" fixed="right">
            <template slot-scope="scope">
              <el-button type="danger" size="mini">查看订单</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-col :span="24" class="toolbar">
          <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
        </el-pagination>
        </el-col>
      </el-tabs>
    </div>
    <div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'first',
        unread: [{}, {}],
        read: [{}],
        recycle: [{}, {}, {}],
        users: [],
        total: 0,
        formLabelWidth: '120px'
      }
    },
    methods: {
      onUserList(tab) {
        console.log('---3232323232', tab, this.stateNum)
        var tap = tab === 1 ? 'first' : tab.name
        console.log('---==========================', tap)
        var n = this.stateNum + 1
        var list = [{
          name: n,
          shopId: 2,
          img: '../static/img/img.jpg',
          nnn: '02003049958775',
          time: '2020-03-02 15:00:00',
          phone: '18611977964'
        }]
        this.users = list
        this.stateNum = n
        this.total = list.length
      },
      handleCurrentChange(val) {
        this.page = val
        this.onUserList()
      }
    },
    mounted() {
      this.onUserList(1)
    }
  }
</script>
<style>
  .message-title {
    cursor: pointer;
  }

  .handle-row {
    margin-top: 30px;
  }
 .el-select .el-input {
    width: 200px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
